<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
  <head>
    <th:block th:replace="~{/_include/header}" />
    <link rel="stylesheet" type="text/css" th:href="@{/assets/css/list-page.css}" />
    <title th:text="${title}"></title>
    <style>
      .form-wrap .modal {
        position: relative;
        display: block;
        z-index: 1;
        border-radius: 0 0 3px 3px;
        margin-top: 44px;
        border: 1px solid #ddd;
        border-top: 2px solid var(--rb-theme-color);
      }
      .form-wrap .modal .modal-dialog,
      .form-wrap .modal .modal-dialog .modal-content {
        margin: 0;
        box-shadow: none;
      }
      .form-wrap .modal .modal-header,
      .form-wrap .modal .dialog-footer .btn-secondary {
        display: none;
      }
      .quick-filter-tabs a.dropdown-item {
        background-color: #f5f5f5;
        border-radius: 2px !important;
      }
      .quick-filter-tabs a.dropdown-item:hover {
        background-color: #ddd;
      }
    </style>
  </head>
  <body>
    <div class="rb-wrapper rb-fixed-sidebar rb-collapsible-sidebar rb-collapsible-sidebar-hide-logo" th:classappend="${sideCollapsedClazz}">
      <th:block th:replace="~{/_include/nav-top}" />
      <th:block th:replace="~{/_include/nav-left}" />
      <div class="rb-loading rb-loading-active must-center J_dock-load">
        <th:block th:replace="~{/_include/spinner}" />
      </div>
      <div class="rb-content">
        <div class="main-content container-fluid">
          <div class="quick-filter-tabs">
            <div>
              <a class="dropdown-item" th:href="|../${entityName}/list|">[[${bundle.L('返回列表')}]]</a>
            </div>
          </div>
          <div class="form-wrap"></div>
        </div>
      </div>
    </div>
    <th:block th:replace="~{/_include/footer}" />
    <script>
      window.__PageConfig = {
        entity: '[[${entityName}]]',
        entityLabel: '[[${entityLabel}]]',
        entityIcon: '[[${entityIcon}]]',
        id: '[[${id}]]',
      }
    </script>
    <th:block th:replace="~{/_include/forms}" />
    <script type="text/babel">
      class RbFormModal2 extends RbFormModal {
        constructor(props) {
          super(props)
          this.state._maximize = true
        }

        componentDidMount() {
          this.getFormModel()
          $('.J_dock-load').remove()
        }
      }

      $(document).ready(() => {
        const wpc = window.__PageConfig
        setTimeout(() => {
          const props = {
            id: wpc.id || null,
            title: wpc.id ? $L('编辑%s', wpc.entityLabel) : $L('新建%s', wpc.entityLabel),
            entity: wpc.entity,
            icon: wpc.entityIcon,
            maximize: true,
            postAfter: function (id) {
              setTimeout(() => {
                const after = $urlp('after')
                if (after === 'view') location.replace(`./view?id=${id}`)
                else if (after === 'edit') location.replace(`./form?id=${id}`)
                else if (after === 'list') location.replace(`../${wpc.entity}/list`)
                else if (after === 'close') window.close()
                else location.reload()
              }, 400)
            },
          }

          let modelComp
          renderRbcomp(<RbFormModal2 {...props} />, $('.form-wrap')[0], function () {
            modelComp = this
          })
        }, 40)
      })
    </script>
  </body>
</html>
